import { wrapClasses, type FireCustomAttributes } from "@lib/types";
import {
  createMemo,
  Show,
  splitProps,
  type JSXElement,
  type ParentComponent,
} from "solid-js";
import type { JSX } from "solid-js/jsx-runtime";

export interface FormItemFloatingProps
  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "classList">,
    FireCustomAttributes<HTMLDivElement> {
  label?: JSXElement;
  for?: string;
}

const FormItemFloating: ParentComponent<FormItemFloatingProps> = (props) => {
  const [local, elProps] = splitProps(props, [
    "ref",
    "$ServerOnly",
    "classList",
    "children",
    "label",
    "for",
  ]);

  const classList = createMemo(() => wrapClasses(local.classList));

  return (
    <div class="form-floating" {...elProps} classList={classList()}>
      {local.children}
      <Show when={local.label}>
        <label for={local.for}>{local.label}</label>
      </Show>
    </div>
  );
};

export default FormItemFloating;
